<template>
   <van-form @submit="nextHandler" validate-trigger="onChange">
      <van-cell-group inset>
         <van-field v-model="tel" name="tel" label="请输入手机号码" :rules="[
         { required: true,pattern, message: '手机号码必须是11位数字' },]" label-width="7em" />
      </van-cell-group>
      <div style="margin: 16px;">
         <van-button round block type="danger" native-type="submit" :disabled="disable">
            下一步
         </van-button>
      </div>
   </van-form>
</template>

<script setup lang='ts'>
import { ref, computed, reactive } from 'vue';
import { useRouter } from 'vue-router'
import { checkPhone } from '@/apis/user'
import { Dialog } from 'vant';
import { useUserStore } from '@/store/userStore'
//初始一个电话好啊吗
const tel = ref('13211692779')
//创建路由实例
const router = useRouter()
//创建store
const user = useUserStore()
//验证手机号码的正则
const pattern = /^\d{11}$/
//下一步按钮是否禁用
const disable = computed<boolean>(() => {
   return !pattern.test(tel.value)
})
//点击下一步处理函数
const nextHandler = () => {
   checkPhone(tel.value)
      .then(res => {
         //如果没有注册过
         if ((res as any).code === '200') {
            //引入消息确认组件
                 Dialog.confirm({
               title: '提示',
               message:
                  `将向手机号:${tel.value}发送短信验证码`,
            }).then(() => {
               //把手机号存储在store
               user.setTel(tel.value)
               //跳转到发送验证码页
               router.push('/register/stepTwo')
            }).catch(() => {
               console.log('取消');
   
            })
         }

      })
}


</script>

<style scoped lang='scss'>

</style>
